<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>打卡</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="css/global.css" />
    <link rel="stylesheet" href="css/record.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css"
    />
    <style>
      .container {
        padding-bottom: 100px;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <!-- navbar -->
    <nav
      class="navbar navbar-expand-lg sticky-top"
      data-bs-theme="dark"
      style="background-color: green"
    >
      <div class="container-fluid">
        <a class="navbar-brand" href="#">吃货小花狮</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="index.html"
                >主頁</a
              >
            </li>
            
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                关于我们
              </a>
              <ul class="dropdown-menu" style="background-color: green;">
                <li><a class="dropdown-item" href="#">关于网页</a></li>
                <li>
                  <a class="dropdown-item" href="member.html">制作团队</a>
                </li>
                <li><hr class="dropdown-divider" /></li>
                <li>
                  <a class="dropdown-item" href="#">Something else here</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!--main-->
    <div class="container">
      <div>
        <!-- Nav tabs -->
        <ul
          class="nav nav-tabs justify-content-center"
          id="myTabs"
          role="tablist"
        >
          <li role="presentation" class="active" style="margin: 2px 5%">
            <a
              href="#record"
              role="tab"
              data-toggle="tab"
              id="tab-1"
              class="tab-underline"
              >打卡记录</a
            >
          </li>
          <li role="presentation" style="margin: 2px 5%">
            <a href="#achievement" role="tab" data-toggle="tab" id="tab-2"
              >打卡成就</a
            >
          </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane" id="record">
            <ul class="your-record">
<!--              <li>-->
<!--                <div class="input-group mb-3" style="margin-top: 5%">-->
<!--                  <button-->
<!--                    class="btn btn-outline-secondary dropdown-toggle"-->
<!--                    type="button"-->
<!--                    data-bs-toggle="dropdown"-->
<!--                    aria-expanded="false"-->
<!--                    id="choose-canteen"-->
<!--                  >-->
<!--                    选择食堂-->
<!--                  </button>-->
<!--                  <ul class="dropdown-menu" style="background-color: green;">-->
<!--                    <li>-->
<!--                      <a-->
<!--                        class="dropdown-item"-->
<!--                        href="#"-->
<!--                        onclick="record_west_canteen()"-->
<!--                        >河西食堂</a-->
<!--                      >-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      <a-->
<!--                        class="dropdown-item"-->
<!--                        href="#"-->
<!--                        onclick="record_east_canteen()"-->
<!--                        >河东食堂</a-->
<!--                      >-->
<!--                    </li>-->
<!--                    <li>-->
<!--                      <a-->
<!--                        class="dropdown-item"-->
<!--                        href="#"-->
<!--                        onclick="record_LiWa_canteen()"-->
<!--                        >丽娃食堂</a-->
<!--                      >-->
<!--                    </li>-->
<!--                  </ul>-->
<!--                  <input-->
<!--                    type="text"-->
<!--                    class="form-control"-->
<!--                    aria-label="Text input with dropdown button"-->
<!--                    placeholder="请输入菜品名称"-->
<!--                    id="input-food-name"-->
<!--                  />-->
<!--                </div>-->
<!--              </li>-->

<!--              <li>-->
<!--                <div class="form-floating" style="margin: 2%">-->
<!--                  <input-->
<!--                    type="text"-->
<!--                    class="form-control"-->
<!--                    placeholder="window"-->
<!--                    id="input-window"-->
<!--                  />-->
<!--                  <label for="window">请输入窗口名称</label>-->
<!--                </div>-->
                <div  class="form-floating" style="margin-top: 20px">
                  <div class="form-floating">
                    <textarea class="form-control textbz" 
                    placeholder="window" 
                    id="input-window" 
                    style="height: 100px">
                  </textarea>
                    <label for="window">我想说</label>
                  </div>
                </div>
              </li>
              <li>
<!--                <div class="form-floating" style="margin: 2%">-->
<!--                  <input-->
<!--                    type="text"-->
<!--                    class="form-control"-->
<!--                    placeholder="price"-->
<!--                    id="input-food-price"-->
<!--                  />-->
<!--                  <label for="price">价格（只需填写数字）</label>-->
<!--                </div>-->
              </li>
            </ul>
<!--            <div-->
<!--              style="-->
<!--                font-size: large;-->
<!--                font-weight: bold;-->
<!--                color: #008000;-->
<!--                margin: 20px;-->
<!--              "-->
<!--            >-->
<!--              方式2：上传文件-->
<!--            </div>-->
            <div style="line-height: 100px; text-align: center; margin: auto">
              <div style="color:rgb(0,128,0);font-size: large;font-weight: 700;">上传图片</div>
              <!-- <button type="button" class="btn btn-success" onclick="uploadPicture()">上传图片</button> -->
              <div class="mb-3">
                <input class="form-control" type="file" id="recordFormFile" accept="image/jpg,image/png,image/bmp,image/gif,image/jpeg"/>
              </div>
              <!-- <button type="button" class="btn btn-primary btnupload">
                上传
              </button> -->
            </div>
            <div style="display: flex; align-items: center; margin-top: 20px">
              <!-- <input type="file" id="upload-picture" /> -->
              <div class="form-check">
                <input class="form-check-input" value="公开" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                <label class="form-check-label" for="flexRadioDefault1">
                  公开
                </label>
              </div>
              <div  style="margin-left: 10px" class="form-check">
                <input class="form-check-input"  value="不公开" type="radio" name="flexRadioDefault" id="flexRadioDefault2">
                <label class="form-check-label" for="flexRadioDefault2">
                  不公开
                </label>
              </div>
              <button
                type="button"
                class="btn btn-outline-success userdk food-record"
              >
                我要打卡
              </button>
            </div>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="achievement">
          <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item-achievement" role="presentation">
              <button
                class="nav-link active"
                id="pills-home-tab"
                data-bs-toggle="pill"
                data-bs-target="#pills-home"
                type="button"
                role="tab"
                aria-controls="pills-home"
                aria-selected="true"
              >
                打卡日期
              </button>
            </li>
            <li class="nav-item-achievement" role="presentation">
              <button
                class="nav-link"
                id="pills-profile-tab"
                data-bs-toggle="pill"
                data-bs-target="#pills-profile"
                type="button"
                role="tab"
                aria-controls="pills-profile"
                aria-selected="false"
              >
                打卡图鉴
              </button>
            </li>
          </ul>
          <div class="tab-content record-date-list" id="pills-tabContent">
          <!--返回顶部-->
          <button onclick="topFunction()" id="myBtn" title="回顶部" class="return">
            <img src="icons/return.png" style="width:40px;height:40px;">
          </button>
          <!------>
            <div
              class="tab-pane fade show active"
              id="pills-home"
              role="tabpanel"
              aria-labelledby="pills-home-tab"
              tabindex="0"
            >
            <ul style="margin-top: 20px;margin-bottom: 100px;">
              <li>你已连续打卡<span class="lxdk">XX</span>天</li>
              <li>你一共打卡<span class="ygdk">XX</span>天</li>
            </ul>
            <button
                type="button"
                class="btn btn-outline-success recordDate"
                onclick="recordDate()"
              >
                显示所有打卡日期
              </button>
            <div class="container mt-5">
              <div>
             
              <table
                class="table_navs asd"
                style="border: 1px solid black;margin:0 auto;"
              >
              </table>
            </div>
          </div>
            <div>
              
                <div class="row">
                  <!-- <div class="col">
                        <h2 class="text-center mb-4"> year 年 month + 1 月</h2>
                        <div class="table-responsive">
                          <table class="table table-bordered">
                            <thead>
                              <tr>
                                <th class="text-center text-danger">日</th>
                                <th class="text-center">一</th>
                                <th class="text-center">二</th>
                                <th class="text-center">三</th>
                                <th class="text-center">四</th>
                                <th class="text-center">五</th>
                                <th class="text-center text-danger">六</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr v-for="(week, weekIndex) in monthWeeks" :key="weekIndex">
                                <td v-for="(day, dayIndex) in week" :key="dayIndex" @click="handleDateClick(day)" :class="[
                                  'text-center',
                                  day === null ? 'empty' : '',
                                  getPunchStatus(new Date(year, month, day).toDateString()) || '',
                                  selectedDate === new Date(year, month, day).toDateString() ? 'selected' : ''
                                ]"> day </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                        <div class="text-center mt-2">
                          <button class="btn btn-primary" onclick="handlePrevMonthClick()">上个月</button>
                          <button class="btn btn-primary" onclick="handleNextMonthClick()">下个月</button>
                        </div>
                      </div> -->
                </div>
              </div>
            </div>
            <div
              class="tab-pane fade"
              id="pills-profile"
              role="tabpanel"
              aria-labelledby="pills-profile"
              tabindex="0"
            >
           
              <div class="record-achievement-list" id="totalrecord">
                <!--返回顶部-->
                <button onclick="topFunction()" id="myBtn" title="回顶部" class="return">
                  <img src="icons/return.png" style="width:40px;height:40px;">
                </button>
                <!------>
                <div class="punchCard"></div>
                <!-- <div class="card" style="width: 100%; margin-top: 3%">
                  <img src="photos/test1.webp" class="card-img-top" alt="..." />
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">
                      Some quick example text to build on the card title and
                      make up the bulk of the card's content.
                    </p>
                    <div class="get-like">获赞数：</div>
                  </div>
                </div>
                <div>123</div> -->
                <!-- <button type="button" class="btn btn-outline-success" style="margin-top: 5%;float: right;" id="record-picture-public">设为公开</button> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--footer-->
    <div id="footer-margin"></div>
    <nav class="navbar fixed-bottom bg-body-tertiary">
      <div class="footer">
        <div class="row row-cols-5">
          <div class="col" onclick="location.href='canteen.html'">
            <img src="icons/normal_u6.png" class="icons" />
            <p class="icon-word">菜品</p>
          </div>
          <div class="col" onclick="location.href='community.html'">
            <img src="icons/normal_u8.png" class="icons" />
            <p class="icon-word">社区</p>
          </div>
          <div class="col" onclick="location.href='index.html'">
            <img src="icons/normal_u14.png" class="icons" />
            <p class="icon-word">首页</p>
          </div>
          <div class="col" onclick="location.href='record.html'">
            <img src="icons/normal_u7.png" class="icons" />
            <p class="icon-word">打卡</p>
          </div>
          <div class="col" onclick="location.href='personal.html'">
            <img src="icons/normal_u5.png" class="icons" />
            <p class="icon-word">个人</p>
          </div>
        </div>
      </div>
    </nav>
  </body>
  <script src="./js/axios.js"></script>
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
    crossorigin="anonymous"
  ></script>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="js/record.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="./js/recordupload.js"></script>
  <script src="./js/return.js"></script>
  <script src="js/checkLogin.js"></script>
</html>
